<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title>认证</title>
		<link rel="stylesheet" type="text/css" href="../c/aui.css" />
		<style>
			.aui-list-item-label-icon {
			font-size: 0.75rem;
			color: #000;
			min-width: 4rem !important;
		}

		.img {
			padding: 0.75rem;
		}

		.img div.aui-card-list-footer div {
			width: 31%;
			height: 5.8rem;
			background: #000 url('../i/shiming.png') no-repeat center center;
			background-size: 1rem;
			position: relative;
		}

		.img p {
			position: absolute;
			bottom: 0.75rem;
			text-align: center;
			left: 0;
			width: 100%;
			font-size: 0.65rem;
			color: #fff;
			opacity: 0.7
		}

		.img .aui-card-list-footer {
			padding: 0.75rem 0;
		}

		.img img {
			width: 100%;
			height: 100%;
		}

		.aui-list,
		.aui-list .aui-list-item {
			background: none !important;
			color: #fff;
			margin-bottom: 0.35rem;
		}

		.aui-list .aui-list-item-label-icon {
			color: #fff;
		}

		#msg {
			font-size: 0.65rem;
			color: #fff;
			opacity: 0.7;
			text-align: center;
			margin-bottom: 1rem;
		}

		.img h3 {
			font-size: 0.75rem;
		}

		.aui-content {
			padding-top: 1rem;
		}

		.list {
			padding: 0.75rem;
			border-top: 5px solid #000;
			padding-bottom: 1rem;
			opacity: 0.7
		}

		.list li {
			padding: 0.5rem 0;
		}

		.list h2 {
			font-size: 0.75rem;
			padding-bottom: 0.35rem;
		}

		.list p {
			padding-left: 1.4rem;
			font-size: 0.7rem;
			color: #ababab;
		}

		.aui-btn-blocks {
			margin: 1.75rem;
		}

		.aui-content input {
			color: #fff;
		}

		.aui-list-item-label-icon {
			text-align: right !important;
		}

		.aui-list-item-input label {
			margin-right: 1.1rem;
		}
		#info{
			position: fixed;
			width: 100%;
			background:#161823;
			z-index: 9999999;
			text-align: center;
			font-size: 1.5rem;
			color: #FE2C55;
		}
		#loadingdi_huifu{
			margin-top: 50%;
		}
	</style>
	</head>

	<body>
		<div id="info" class="aui-hide"></div>
		<div id="loadingdi_huifu"><img src="../i/footer_progress.png" /></div>
		<div class="aui-content aui-hide">
			<ul class="aui-list aui-form-list">
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							真实姓名
						</div>
						<div class="aui-list-item-input">
							<input type="text" id="name" value="" placeholder="请输入真实姓名" Tapmode>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							选择性别
						</div>
						<div class="aui-list-item-input">
							<label><input class="aui-radio" type="radio" name="sex" value="1"> 男</label>
							<label><input class="aui-radio" type="radio" name="sex" value="2"> 女</label>
						</div>
					</div>
				</li>
				<li class="aui-list-item" style="display: none;">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							出生日期
						</div>
						<div class="aui-list-item-input">
							<input type="text" readonly id="birthday" value="" placeholder="请选择出生日期" Tapmode onclick="d()">
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							身份证号
						</div>
						<div class="aui-list-item-input">
							<input type="text" id="sfz" value="" placeholder="请输入身份证号码" Tapmode>
						</div>
					</div>
				</li>
				<li class="aui-list-item">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							居住地址
						</div>
						<div class="aui-list-item-input">
							<input type="text" id="address" value="" placeholder="请输入现居住地址" Tapmode>
						</div>
					</div>
				</li>
			</ul>
			<div class="img" style="padding-bottom:0">
				<h3>上传身份</h3>
				<div class="aui-card-list-footer">
					<div id="img_shou" data-img='' tapmode onclick="img(1)" style="display: none;">
						<p>
							手持身份证
						</p>
					</div>
					<div id="img_l" data-img='' tapmode onclick="img(2)">
						<p>
							身份证正面
						</p>
					</div>
					<div id="img_r" data-img='' tapmode onclick="img(3)">
						<p>
							身份证反面
						</p>
					</div>
				</div>
			</div>
			<div class="img" style="padding:0 0.75rem;opacity:0.8">
				<h3>上传示例</h3>
				<div class="aui-card-list-footer">
					<div style="display: none;">
						<img src="http://qiniu.live.kxg99.com/yuzhibo/idexamplec.png">
					</div>
					<div>
						<img src="http://qiniu.live.kxg99.com/yuzhibo/idexampleb.png">
					</div>
					<div>
						<img src="http://qiniu.live.kxg99.com/yuzhibo/idexamplea.png">
					</div>
				</div>
			</div>
			<div id="msg">
				请上传本人真实信息，否则拒绝通过！
			</div>
			<div class="aui-btn-blocks">
				<div class="aui-btn aui-btn-block aui-btn-danger " Tapmode onclick="add()">
					提交认证
				</div>
			</div>
			<div class="list">
				<ul>
					<li>
						<h2>1、为什么实名认证?</h2>
						<p>应相关部门要求,网络应用传播需要完成实名认证</p>
					</li>
					<li>
						<h2>2、实名认证审核失败常见原因:</h2>
						<p>· 年龄不在20-60周岁之间</p>
						<p>· 非真实身份证件照片</p>
						<p>· 身份证过期</p>
						<p>· 一个身份证只能实名一次</p>
						<p>· 身份证件照片不清晰</p>
					</li>
					<li>
						<h2>3、审核失败后限制:</h2>
						<p>无法使用愉币提现微信</p>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		apiready = function() {
			urls();
			if (_getPrefs('_user').shiming) {
				if (_getPrefs('_user').shiming == 1 || _getPrefs('_user').shiming == 2) {
					$('#info').removeClass('aui-hide');
					$('#info').text(_getPrefs('_user').shiming == 1 ? '已审核' : '正在审核中');
					$api.css($api.dom('#info'), 'heigth:' + api.winHeight + 'px;line-height:' + (api.winHeight - 200) + 'px');
					$('#loadingdi_huifu').remove();
					return;
				}
			}
			api.parseTapmode();
			info_sfz();
		}
		// 提交认证
		function add() {
			var name = $('#name').val();
			if (!name) {
				_msg('请输入真实姓名');
				document.getElementById("name").focus();
				return
			}
			var regName = /^[\u4e00-\u9fa5]{2,4}$/;
			if (!regName.test(name)) {
				_msg('请正确输入您的姓名');
				document.getElementById("name").focus();
				return
			}
			var sex = $('input[name="sex"]:checked').val();
			if (!sex) {
				_msg('请选择性别');
				return
			}
			// var birthday = $('#birthday').val();
			// if (!birthday) {
			// 	_msg('请选择出生日期');
			// 	return document.getElementById("birthday").focus();
			// }
			var sfz = $('#sfz').val();
			sfz = sfz.replace(" ", "");
			if (!sfz) {
				_msg('请输入身份证号码');
				return document.getElementById("sfz").focus();
			}
			if (!checkIdCard(sfz)) {
				_msg('身份证号码有误');
				return document.getElementById("sfz").focus();
			}
			var address = $('#address').val();
			if (!address) {
				_msg('请输入身份证地址');
				return document.getElementById("address").focus();
			}
			// var sfz_shou = $('#img_shou').data('img');
			// if (!sfz_shou) {
			// 	return _msg('请上传手持身份证');
			// }
			var sfz_l = $('#img_l').data('img');
			if (!sfz_l) {
				return _msg('请上传身份证正面');
			}
			var sfz_r = $('#img_r').data('img');
			if (!sfz_r) {
				return _msg('请上传身份证反面');
			}
			document.activeElement.blur();
			_loading();
			_ajax('member/shiming_add', function(ret, err) {
				if (ret) {
					if (ret.ret) {
						_userInfo();
						_alert(ret.ret, function(ret) {
							_close();
						})
					} else {
						_alert(ret.err)
					}
				} else {
					_alert(JSON.stringify(err))
				}
				_loadingCloes();
			}, {
				name: name,
				sfz: sfz,
				// sfz_shou: sfz_shou,
				sfz_l: sfz_l,
				sfz_r: sfz_r,
				sex: sex,
				address: address
				// birthday: birthday
			})
		}
		// 选择身份证
		function img(type) {
			api.getPicture({
				sourceType: 'camera',
				mediaValue: 'pic',
				destinationType: 'url',
				allowEdit: false,
				quality: 50,
			}, function(ret, err) {
				if (ret) {
					if (ret.data) {
						img_ajax(ret.data, type)
					}
				}
			});
		}

		// 封装上次图片方法
		function img_ajax(image, type) {
			if (!image) {
				_msg('图片地址出错')
				return;
			}
			_loading('正在上传中');
			_qiniu(image, function(ret, err) {
				if (ret.status) {
					console.log(JSON.stringify(ret));
					if (ret.oper == "complete") {
						_loadingCloes();
						var img = ret.info.key;
						if (type == 1) {
							var _this = $('#img_shou');
							_msg('手持身份证上传成功')
						} else if (type == 2) {
							var _this = $('#img_l');
							_msg('身份证正面上传成功')
						} else {
							var _this = $('#img_r');
							_msg('身份证反面上传成功')
						}
						_this.data('img', ret.info.key);
						_this.html('<img src="' + image + '" />');
					} else if (ret.oper == "progress") {
						//上传过程中获取进度数据
					}
				} else {
					_loadingCloes();
					console.log(JSON.stringify(err));
				}
			});


		}
		// 获取认证信息
		function info_sfz() {
			_loading();
			_ajax('member/shiming_view', function(ret, err) {
				if (ret) {
					console.log(JSON.stringify(ret));
					if (ret.ret) {
						var a = ret.ret;
						$('#name').val(a.name);
						//	var sex = $('input[name="sex"]:checked').val();
						$('input[name="sex"]').eq(a.sex == 1 ? 0 : 1).attr("checked", "checked");
						$('#birthday').val(a.birthday);
						$('#sfz').val(a.sfz);
						$('#address').val(a.address);
						$('#img_shou').data('img', a.sfz_shou);
						$('#img_l').data('img', a.sfz_l);
						$('#img_r').data('img', a.sfz_r);

						$('.aui-content').removeClass('aui-hide');
					} else if (ret.err) {
						$('#info').removeClass('aui-hide');
						$('#info').text(ret.err);
						$api.css($api.dom('#info'), 'heigth:' + api.winHeight + 'px;line-height:' + (api.winHeight - 200) + 'px');
					}
				} else {
					$('.aui-content').removeClass('aui-hide');
				}
				$('#loadingdi_huifu').remove();
				_loadingCloes();
			})
		}
		// 出生日期
		function d() {
			document.activeElement.blur();
			api.openPicker({
				type: 'date',
				title: '选择出生日期'
			}, function(ret, err) {
				if (ret) {
					console.log(JSON.stringify(ret));
					$('#birthday').val(ret.year + '-' + ret.month + '-' + ret.day);
				} else {
					alert(JSON.stringify(err));
				}
			});
		}

		function checkIdCard(idcard) {
			const regIdCard = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
			if (!regIdCard.test(idcard)) {
				return false;
			} else {
				return true;
			}
		}
		//
	</script>

</html>
